/*********************************************************************************************************************************************
 Main Less document Document 
*********************************************************************************************************************************************
	
	Author:			James Dennis & Daniel Essex
	Website:		www.GJWtitmuss.co.uk
	Date:			01/10/2014
	Notes:			To be used for mobile template
	
*********************************************************************************************************************************************
 Import all site less styles for processing 
*********************************************************************************************************************************************/
	
/*Specific base variables*/
	@import "titmuss/m_colours";					/*colours - base colours, complimentry colours, colour variations, gradients*/
		
/*Generic*/
	@import "generic/m_mixins";						/*Mixins*/	
	@import "generic/m_grid";						/*Mixins*/	
	
/*Third Party CSS*/
	/*@import "third_party/m_flexslider";				/*Flexslider - http://flexslider.woothemes.com/ */
	@import "third_party/owl_carousel";				/*Owl Carousel - http://owlgraphic.com/owlcarousel/ */
	@import "third_party/owl_theme";				/*Owl Carousel - http://owlgraphic.com/owlcarousel/ */
	
/*Specific & Overides*/
	@import "titmuss/GJWTitmuss2014_JQMTheme";		/*Titmuss JQM theme from Themeroller*/
	@import "generic/m_icons";						/*icons - icons via icomoon */



/*********************************************************************************************************************************************
 Styles to organise
*********************************************************************************************************************************************/

[data-icon]:before{display:none;}

/* Swipe works with mouse as well but often causes text selection. */
#page * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* Arrow only buttons in the header. */
#page .ui-header .ui-btn {
    background: none;
    border: none;
    top: 9px;
}
#page .ui-header .ui-btn-inner {
    border: none;
}
/* Content styling. */
dl { padding: 1em; }
dt { font-size: 2em; font-weight: bold; }
dt span { font-size: .5em; color: #777; margin-left: .5em; }
dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
.back-btn { float: right; margin: 0 2em 1em 0; }

.globalHeader{
	.header_btns{
		width:100%;
		list-style:none;
		margin:0; 
		padding:0;
		overflow:hidden;
		margin-left:5px;
		li{
			.inline-block();
			vertical-align:top;
			a{
				display:block;
				&.logo{
					background-image:url(../images/gjwtitmuss_logo_mobile.png);
					background-image:url(../images/gjwtitmuss_logo_mobile.svg);
					background-position: center center;
					background-repeat:no-repeat;
					background-size:100%;
					width:180px;
					height:40px;
					margin:0 5px;
				}
				&.header-icon{
					text-decoration:none;
					height:20px;
					line-height:20px;
					padding:5px 8px;
					margin:5px 0;
					color:#ffffff !important;
					text-shadow:none;
					background:rgba(0,47,20, .2);
					border:none;
					.border-radius(25px);
					&:hover, &:active{
						background:rgba(0,47,20, .5);
						}
					}
				}
		}	
	}
	.ui-input-search{
		margin:10px 15px;
	}
}

.mainMenu{
	.featurefont();
/*	text-transform:uppercase;*/
	list-style:none;
	margin:0;
	padding:0;
	
	h3{
		.featurefont();
		font-size:2em !important;
	}
	
	ul{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
		&[data-icon]:before{ display:none;}
		
		h3{
			padding:0px 10px;
			margin:0;
		}
		a{
			text-decoration:none;
			display:block;
			padding:3px 5px;
			.featurefont();
			&[data-icon]:before {
				margin-right:10px;
				display:inline !important;
			}
		}
	}
}

.homeIcons{
	a{
		position:relative;
		/*background:#FFFFFF;*/
		font-size:40px;
		font-weight:normal !important;
		border:1px solid #ccc;
		display:block;
		height:50px;
		line-height:55px;
		text-align:center;
		text-decoration:none;
		margin:5px;
		overflow:hidden;
		.transition(all 0.5s ease-in);
		.border-radius ();
		&.l{
			text-align:left;
			padding-left:10px;
		}
		span{
			.featurefont();
			position:absolute;
			font-size:16px;
			line-height:18px;
			right:10px;
			top:8px;
			text-transform:uppercase;
		}
		
		&:hover{
			background:@base;
			color:#ffffff !important;
		}
	}
}
.banner{
	width:100%;
	overflow:hidden;
	img{
		width:100%;
		height:100%;
		height:auto;
	}
}

.mainFooter{
	position:relative;
	min-height:150px;
	padding-bottom:10px;
	header{
		height:45px;
		line-height:50px;
		background:@darker;
		.socialBtns{
			list-style:none;
			margin:0;
			padding:0;
			li{
				font-size:1.5em;
				.inline-block();
				a{
					color:#ffffff;
					font-weight:normal !important;
					text-decoration:none;
					padding:5px;
					text-shadow:none;
					.transition(all 0.5s ease-in);
					opacity:.5;
					&:hover{
						opacity:1;
						color:#FFFFFF;
					}
				}
			}
		}
	}
	.contactTag{
		position:absolute;
		height:122px;
		width:103px;
		display:block;
		right:5px;
		top:-1px;
		background:url(../images/dog-tag-01.png) center center no-repeat;
		z-index:100;
	}
	p.small{margin:5px 10px;}
	.links{
		list-style:none;
		margin:10px;
		padding:0;
		li{
			a{
				text-decoration:none;
				font-size:.8em;
				color:#FFFFFF;
				.transition(all 0.5s ease-in);
				opacity:.8;
				&:hover{
					opacity:1;
					color:#FFFFFF;
				}
			}
		}
	}
}

.pageTitle{
	h1.ui-title{
		.inline-block;
		margin:0 40px;
		font-size:1.5em;
		text-transform:uppercase;
		padding:5px;
	}
}
p{
	&.small{font-size:.7em; opacity:.7}
}

.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}

.searchBar{
	background:@darker;
	padding:5px 10px;
	
	input.ui-input-text{
		padding: .4em;
		min-height: 20px;
		line-height:18px;
		font-size: 14px;
		}
}

.clear{clear: both;}

/*********************************************************************************************************************************************/
/* Product Stamp styles*/
/*********************************************************************************************************************************************/	
.deal_of_the_week{
	.gradient (#F00, #8C0000);
	border:none;
	padding:10px 5px !important;
	h3{padding:0 !important; margin:0 !important;}
}

#product_carousel{
	margin:0;
	.item{
		margin:10px;
	}
}

.product_array{
	.product{
		margin-bottom:10px;
	}
}

.product {
	background:#FFFFFF;
	border:1px solid #CCCCCC;
	padding:10px;
	position:relative;
	overflow:hidden;
	display:block;

	&.summary .left_col{float:left; width:100px;}
	&.summary .right_col{float:right; width:160px;}
	
	&.detail .left_col{float:left; width:48%;}
	&.detail .right_col{float:right; width:48%;}
	
	.ctaPanel{
		clear:both;
		.btn{
			.rounded(5px);
			.transition(all, 0.2s, ease-in);
			.gradient(#eeeeee, #cccccc);
			.box-shadow(0px, 0px, 3px, 0.3);
			padding:.2em .4em;
			color:#000;
			text-decoration:none;
			text-transform:uppercase;
			.featurefont;
			.inline-block;
			position:relative;
			text-align:left;
			opacity:.8;
			text-wrap:normal;
			&:hover{
				opacity:1; 
				.transition(all, 0.2s, ease-in);
			}
			&.more{}
			&.fav{}
			&.add{}
		}
	}
	
	h1 {
		.featurefont;
		font-size:.9em;
		line-height:1;
		margin:0;
		padding:0;
		.inline-block;
		&.prodName{
			color:#666666;
		}
	}
	a { 
		color:#006633;
		text-decoration:none;
	}
	
	.prodImg{
		float:left;
	}
	&.detail .prodImg{
		width:100%;
		height:100%;
		height:auto;
	}
	
	.promoIcon{
		width:100px;
		height:100px;
	}
	
	.prodRating{color:#DDDDDD;}
    .prodRating .gold{color:#ffac00;}	
	.prodRating{
		font-size:1em;
		text-align:center;
		width:100px;
		margin:0;
	}
	.prodReviews, .writeReview {
		font-size:11px;
		line-height:14px;
		text-align:center;
		width:100px;
	}
	.description{
		.inline-block;
		font-size:13px;
	}
	.special_offer{
		.inline-block;
		.gradient (#F00, #8C0000);
		color:#fff;
		font-weight:bold;
		padding:5px 15px; 
		font-size:.9em;
		margin-top:1em;
		.featurefont;
		text-align:center;
		
	}
	.prodIcons{
		text-align:left;
		min-height:35px;
		.inline-block;
		float:left;
	}
	.prodOffer {
		.inline-block;
		.featurefont;
		text-align:right;
		min-height:40px;
		float:right;
		.prodPrice{	
			position:relative;	
			font-size:22px;
			color:@base;
			font-weight:600;	

			span.small{
				font-size:10px;
				color:#666666;
				position:absolute;
				top:-7px;
				line-height:10px;
			}
			&.RRP{
				color:#888888;
				font-size:14px;
				span{
					&.small{text-decoration:none !important;}
					&.strike{text-decoration:line-through !important;}
				}
				
			}
		}
	}
	.promoIcon{
		 position:absolute;
		 top:0;
		 left:0;
		 background-position: top left;
		 background-repeat:no-repeat;
		 &.hot {
			 background-image:url(../images/icons/hot_imageCorner_promoIcon.svg);
		}
		 &.free{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_Free_Delivery.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_Free_Delivery.svg), none;
		}
		 &.twos{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn2s.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn2s.svg), none;
		}
		 &.threes{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn3s.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn3s.svg), none;
		}
		 &.hotpick{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_HotPick.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_HotPick.svg), none;
		}
		 &.bulk{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BulkItem.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BulkItem.svg), none;
		}
	}
}


.ui-panel.ui-panel-open {
        position:fixed;
    }
.ui-panel-inner {
	position: absolute;
	top: 1px;
	left: 0;
	right: 0;
	bottom: 0px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

img.imgFluid{
	width:100%;
	height:100%;
	height:auto;
	display: block;
}

.noCP{margin: -15px;}
.noPad{padding:0 !important;}
.padB{padding-bottom:15px;}
.ui-collapsible-set.noMar{margin:0;}
.ui-content.noMar{padding:0 1em;}

.ui-panel {
    overflow: hidden;
}
.ui-panel-inner{
    overflow-y: scroll;
	overflow-x: hidden;
}
.panel_header{
	width: 230px;
	margin: -15px;
	padding: 15px;
}